<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Button - FLATY Admin</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">

        <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

        <!--base css styles-->
        <link rel="stylesheet" href="assets/bootstrap/bootstrap.min.css">
        <link rel="stylesheet" href="assets/bootstrap/bootstrap-responsive.min.css">
        <link rel="stylesheet" href="assets/font-awesome/css/font-awesome.min.css">
        <link rel="stylesheet" href="assets/normalize/normalize.css">

        <!--page specific css styles-->

        <!--flaty css styles-->
        <link rel="stylesheet" href="css/flaty.css">
        <link rel="stylesheet" href="css/flaty-responsive.css">

        <link rel="shortcut icon" href="img/favicon.html">

        <script src="assets/modernizr/modernizr-2.6.2.min.js"></script>
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
        <![endif]-->

        <!-- BEGIN Theme Setting -->
        <div id="theme-setting">
            <a href="#"><i class="icon-gears icon-2x"></i></a>
            <ul>
                <li>
                    <span>Skin</span>
                    <ul class="colors" data-target="body" data-prefix="skin-">
                        <li class="active"><a class="blue" href="#"></a></li>
                        <li><a class="red" href="#"></a></li>
                        <li><a class="green" href="#"></a></li>
                        <li><a class="orange" href="#"></a></li>
                        <li><a class="yellow" href="#"></a></li>
                        <li><a class="pink" href="#"></a></li>
                        <li><a class="magenta" href="#"></a></li>
                        <li><a class="gray" href="#"></a></li>
                        <li><a class="black" href="#"></a></li>
                    </ul>
                </li>
                <li>
                    <span>Navbar</span>
                    <ul class="colors" data-target="#navbar" data-prefix="navbar-">
                        <li class="active"><a class="blue" href="#"></a></li>
                        <li><a class="red" href="#"></a></li>
                        <li><a class="green" href="#"></a></li>
                        <li><a class="orange" href="#"></a></li>
                        <li><a class="yellow" href="#"></a></li>
                        <li><a class="pink" href="#"></a></li>
                        <li><a class="magenta" href="#"></a></li>
                        <li><a class="gray" href="#"></a></li>
                        <li><a class="black" href="#"></a></li>
                    </ul>
                </li>
                <li>
                    <span>Sidebar</span>
                    <ul class="colors" data-target="#main-container" data-prefix="sidebar-">
                        <li class="active"><a class="blue" href="#"></a></li>
                        <li><a class="red" href="#"></a></li>
                        <li><a class="green" href="#"></a></li>
                        <li><a class="orange" href="#"></a></li>
                        <li><a class="yellow" href="#"></a></li>
                        <li><a class="pink" href="#"></a></li>
                        <li><a class="magenta" href="#"></a></li>
                        <li><a class="gray" href="#"></a></li>
                        <li><a class="black" href="#"></a></li>
                    </ul>
                </li>
                <li>
                    <span></span>
                    <a data-target="navbar" href="#"><i class="icon-check-empty"></i> Fixed Navbar</a>
                    <a class="pull-right visible-desktop" data-target="sidebar" href="#"><i class="icon-check-empty"></i> Fixed Sidebar</a>
                </li>
            </ul>
        </div>
        <!-- END Theme Setting -->

        <!-- BEGIN Navbar -->
        <div id="navbar" class="navbar">
            <div class="navbar-inner">
                <div class="container-fluid">
                    <!-- BEGIN Brand -->
                    <a href="#" class="brand">
                        <small>
                            <i class="icon-desktop"></i>
                            FLATY Admin
                        </small>
                    </a>
                    <!-- END Brand -->

                    <!-- BEGIN Responsive Sidebar Collapse -->
                    <a href="#" class="btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse">
                        <i class="icon-reorder"></i>
                    </a>
                    <!-- END Responsive Sidebar Collapse -->

                    <!-- BEGIN Navbar Buttons -->
                    <ul class="nav flaty-nav pull-right">
                        <!-- BEGIN Button Tasks -->
                        <li class="hidden-phone">
                            <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                                <i class="icon-tasks"></i>
                                <span class="badge badge-warning">4</span>
                            </a>

                            <!-- BEGIN Tasks Dropdown -->
                            <ul class="pull-right dropdown-navbar dropdown-menu">
                                <li class="nav-header">
                                    <i class="icon-ok"></i>
                                    4 Tasks to complete
                                </li>

                                <li>
                                    <a href="#">
                                        <div class="clearfix">
                                            <span class="pull-left">Software Update</span>
                                            <span class="pull-right">75%</span>
                                        </div>

                                        <div class="progress progress-mini progress-warning">
                                            <div style="width:75%" class="bar"></div>
                                        </div>
                                    </a>
                                </li>

                                <li>
                                    <a href="#">
                                        <div class="clearfix">
                                            <span class="pull-left">Transfer To New Server</span>
                                            <span class="pull-right">45%</span>
                                        </div>

                                        <div class="progress progress-mini progress-danger">
                                            <div style="width:45%" class="bar"></div>
                                        </div>
                                    </a>
                                </li>

                                <li>
                                    <a href="#">
                                        <div class="clearfix">
                                            <span class="pull-left">Bug Fixes</span>
                                            <span class="pull-right">20%</span>
                                        </div>

                                        <div class="progress progress-mini">
                                            <div style="width:20%" class="bar"></div>
                                        </div>
                                    </a>
                                </li>

                                <li>
                                    <a href="#">
                                        <div class="clearfix">
                                            <span class="pull-left">Writing Documentation</span>
                                            <span class="pull-right">85%</span>
                                        </div>

                                        <div class="progress progress-mini progress-success progress-striped active">
                                            <div style="width:85%" class="bar"></div>
                                        </div>
                                    </a>
                                </li>

                                <li class="more">
                                    <a href="#">See tasks with details</a>
                                </li>
                            </ul>
                            <!-- END Tasks Dropdown -->
                        </li>
                        <!-- END Button Tasks -->

                        <!-- BEGIN Button Notifications -->
                        <li class="hidden-phone">
                            <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                                <i class="icon-bell-alt"></i>
                                <span class="badge badge-important">5</span>
                            </a>

                            <!-- BEGIN Notifications Dropdown -->
                            <ul class="dropdown-navbar dropdown-menu">
                                <li class="nav-header">
                                    <i class="icon-warning-sign"></i>
                                    5 Notifications
                                </li>

                                <li class="notify">
                                    <a href="#">
                                        <i class="icon-comment orange"></i>
                                        <p>New Comments</p>
                                        <span class="badge badge-warning">4</span>
                                    </a>
                                </li>

                                <li class="notify">
                                    <a href="#">
                                        <i class="icon-twitter blue"></i>
                                        <p>New Twitter followers</p>
                                        <span class="badge badge-info">7</span>
                                    </a>
                                </li>

                                <li class="notify">
                                    <a href="#">
                                        <img src="img/demo/avatar/avatar2.jpg" alt="Alex" />
                                        <p>David would like to become moderator.</p>
                                    </a>
                                </li>

                                <li class="notify">
                                    <a href="#">
                                        <i class="icon-bug pink"></i>
                                        <p>New bug in program!</p>
                                    </a>
                                </li>

                                <li class="notify">
                                    <a href="#">
                                        <i class="icon-shopping-cart green"></i>
                                        <p>You have some new orders</p>
                                        <span class="badge badge-success">+10</span>
                                    </a>
                                </li>

                                <li class="more">
                                    <a href="#">See all notifications</a>
                                </li>
                            </ul>
                            <!-- END Notifications Dropdown -->
                        </li>
                        <!-- END Button Notifications -->

                        <!-- BEGIN Button Messages -->
                        <li class="hidden-phone">
                            <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                                <i class="icon-envelope"></i>
                                <span class="badge badge-success">3</span>
                            </a>

                            <!-- BEGIN Messages Dropdown -->
                            <ul class="dropdown-navbar dropdown-menu">
                                <li class="nav-header">
                                    <i class="icon-comments"></i>
                                    3 Messages
                                </li>

                                <li class="msg">
                                    <a href="#">
                                        <img src="img/demo/avatar/avatar3.jpg" alt="Sarah's Avatar" />
                                        <div>
                                            <span class="msg-title">Sarah</span>
                                            <span class="msg-time">
                                                <i class="icon-time"></i>
                                                <span>a moment ago</span>
                                            </span>
                                        </div>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                                    </a>
                                </li>

                                <li class="msg">
                                    <a href="#">
                                        <img src="img/demo/avatar/avatar4.jpg" alt="Emma's Avatar" />
                                        <div>
                                            <span class="msg-title">Emma</span>
                                            <span class="msg-time">
                                                <i class="icon-time"></i>
                                                <span>2 Days ago</span>
                                            </span>
                                        </div>
                                        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris ...</p>
                                    </a>
                                </li>

                                <li class="msg">
                                    <a href="#">
                                        <img src="img/demo/avatar/avatar5.jpg" alt="John's Avatar" />
                                        <div>
                                            <span class="msg-title">John</span>
                                            <span class="msg-time">
                                                <i class="icon-time"></i>
                                                <span>8:24 PM</span>
                                            </span>
                                        </div>
                                        <p>Duis aute irure dolor in reprehenderit in ...</p>
                                    </a>
                                </li>

                                <li class="more">
                                    <a href="#">See all messages</a>
                                </li>
                            </ul>
                            <!-- END Notifications Dropdown -->
                        </li>
                        <!-- END Button Messages -->

                        <!-- BEGIN Button User -->
                        <li class="user-profile">
                            <a data-toggle="dropdown" href="#" class="user-menu dropdown-toggle">
                                <img class="nav-user-photo" src="img/demo/avatar/avatar1.jpg" alt="Penny's Photo" />
                                <span class="hidden-phone" id="user_info">
                                    Penny
                                </span>
                                <i class="icon-caret-down"></i>
                            </a>

                            <!-- BEGIN User Dropdown -->
                            <ul class="dropdown-menu dropdown-navbar" id="user_menu">
                                <li class="nav-header">
                                    <i class="icon-time"></i>
                                    Logined From 20:45
                                </li>

                                <li>
                                    <a href="#">
                                        <i class="icon-cog"></i>
                                        Account Settings
                                    </a>
                                </li>

                                <li>
                                    <a href="#">
                                        <i class="icon-user"></i>
                                        Edit Profile
                                    </a>
                                </li>

                                <li>
                                    <a href="#">
                                        <i class="icon-question"></i>
                                        Help
                                    </a>
                                </li>

                                <li class="divider visible-phone"></li>

                                <li class="visible-phone">
                                    <a href="#">
                                        <i class="icon-tasks"></i>
                                        Tasks
                                        <span class="badge badge-warning">4</span>
                                    </a>
                                </li>
                                <li class="visible-phone">
                                    <a href="#">
                                        <i class="icon-bell-alt"></i>
                                        Notifications
                                        <span class="badge badge-important">8</span>
                                    </a>
                                </li>
                                <li class="visible-phone">
                                    <a href="#">
                                        <i class="icon-envelope"></i>
                                        Messages
                                        <span class="badge badge-success">5</span>
                                    </a>
                                </li>

                                <li class="divider"></li>

                                <li>
                                    <a href="#">
                                        <i class="icon-off"></i>
                                        Logout
                                    </a>
                                </li>
                            </ul>
                            <!-- BEGIN User Dropdown -->
                        </li>
                        <!-- END Button User -->
                    </ul>
                    <!-- END Navbar Buttons -->
                </div><!--/.container-fluid-->
            </div><!--/.navbar-inner-->
        </div>
        <!-- END Navbar -->

        <!-- BEGIN Container -->
        <div class="container-fluid" id="main-container">
            <!-- BEGIN Sidebar -->
            <div id="sidebar" class="nav-collapse">
                <!-- BEGIN Navlist -->
                <ul class="nav nav-list">
                    <!-- BEGIN Search Form -->
                    <li>
                        <form target="#" method="GET" class="search-form">
                            <span class="search-pan">
                                <button type="submit">
                                    <i class="icon-search"></i>
                                </button>
                                <input type="text" name="search" placeholder="Search ..." autocomplete="off" />
                            </span>
                        </form>
                    </li>
                    <!-- END Search Form -->
                    <li>
                        <a href="index.html">
                            <i class="icon-dashboard"></i>
                            <span>Dashboard</span>
                        </a>
                    </li>

                    <li>
                        <a href="typography.html">
                            <i class="icon-text-width"></i>
                            <span>Typography</span>
                        </a>
                    </li>

                    <li class="active">
                        <a href="#" class="dropdown-toggle">
                            <i class="icon-desktop"></i>
                            <span>UI Elements</span>
                            <b class="arrow icon-angle-right"></b>
                        </a>

                        <!-- BEGIN Submenu -->
                        <ul class="submenu">
                            <li><a href="ui_general.html">General</a></li>
                            <li class="active"><a href="ui_button.html">Button</a></li>
                            <li><a href="ui_slider.html">Slider</a></li>
                            <li><a href="ui_chart.html">Chart</a></li>
                            <li><a href="ui_message.html">Conversation</a></li>
                            <li><a href="ui_icon.html">Icon</a></li>
                        </ul>
                        <!-- END Submenu -->
                    </li>

                    <li>
                        <a href="#" class="dropdown-toggle">
                            <i class="icon-edit"></i>
                            <span>Forms</span>
                            <b class="arrow icon-angle-right"></b>
                        </a>

                        <!-- BEGIN Submenu -->
                        <ul class="submenu">
                            <li><a href="form_layout.html">Layout</a></li>
                            <li><a href="form_component.html">Component</a></li>
                            <li><a href="form_wizard.html">Wizard</a></li>
                            <li><a href="form_validation.html">Validation</a></li>
                        </ul>
                        <!-- END Submenu -->
                    </li>

                    <li>
                        <a href="#" class="dropdown-toggle">
                            <i class="icon-list"></i>
                            <span>Tables</span>
                            <b class="arrow icon-angle-right"></b>
                        </a>

                        <!-- BEGIN Submenu -->
                        <ul class="submenu">
                            <li><a href="table_basic.html">Basic</a></li>
                            <li><a href="table_advance.html">Advance</a></li>
                            <li><a href="table_dynamic.html">Dynamic</a></li>
                        </ul>
                        <!-- END Submenu -->
                    </li>

                    <li>
                        <a href="box.html">
                            <i class="icon-list-alt"></i>
                            <span>Box</span>
                        </a>
                    </li>

                    <li>
                        <a href="calendar.html">
                            <i class="icon-calendar"></i>
                            <span>Calendar</span>
                        </a>
                    </li>

                    <li>
                        <a href="gallery.html">
                            <i class="icon-picture"></i>
                            <span>Gallery</span>
                        </a>
                    </li>

                    <li>
                        <a href="grid.html">
                            <i class="icon-th"></i>
                            <span>Griding System</span>
                        </a>
                    </li>

                    <li>
                        <a href="#" class="dropdown-toggle">
                            <i class="icon-file"></i>
                            <span>Other Pages</span>
                            <b class="arrow icon-angle-right"></b>
                        </a>

                        <!-- BEGIN Submenu -->
                        <ul class="submenu">
                            <li><a href="more_login.html">Login &amp; Register</a></li>
                            <li><a href="more_error-404.html">Error 404</a></li>
                            <li><a href="more_error-500.html">Error 500</a></li>
                            <li><a href="more_blank.html">Blank Page</a></li>
                            <li><a href="more_set-skin.html">Skin</a></li>
                            <li><a href="more_set-sidebar-navbar-color.html">Sidebar &amp; Navbar</a></li>
                            <li><a href="more_sidebar-collapsed.html">Collapsed Sidebar</a></li>
                        </ul>
                        <!-- END Submenu -->
                    </li>
                </ul>
                <!-- END Navlist -->

                <!-- BEGIN Sidebar Collapse Button -->
                <div id="sidebar-collapse" class="visible-desktop">
                    <i class="icon-double-angle-left"></i>
                </div>
                <!-- END Sidebar Collapse Button -->
            </div>
            <!-- END Sidebar -->

            <!-- BEGIN Content -->
            <div id="main-content">
                <!-- BEGIN Page Title -->
                <div class="page-title">
                    <div>
                        <h1><i class="icon-file-alt"></i> Button</h1>
                        <h4>buttons, dropdowns and more</h4>
                    </div>
                </div>
                <!-- END Page Title -->

                <!-- BEGIN Breadcrumb -->
                <div id="breadcrumbs">
                    <ul class="breadcrumb">
                        <li>
                            <i class="icon-home"></i>
                            <a href="index.html">Home</a>
                            <span class="divider"><i class="icon-angle-right"></i></span>
                        </li>
                        <li class="active">Button</li>
                    </ul>
                </div>
                <!-- END Breadcrumb -->

                <!-- BEGIN Main Content -->
                <div class="row-fluid">
                    <div class="span6">
                        <div class="box">
                            <div class="box-title">
                                <h3><i class="icon-th-large"></i>Default Buttons</h3>
                            </div>
                            <div class="box-content">
                                <p>
                                    <button class="btn">Button</button>
                                </p>
                                <p>
                                    <button class="btn btn-primary">Primary</button>
                                    <button class="btn btn-info">Info</button>
                                    <button class="btn btn-warning">Warning</button>
                                    <button class="btn btn-danger">Danger</button>
                                    <button class="btn btn-inverse">Inverse</button>
                                    <button class="btn btn-success">Success</button>
                                </p>
                                <p>
                                    <button class="btn btn-pink">Pink</button>
                                    <button class="btn btn-magenta">Magenta</button>
                                    <button class="btn btn-lime">Lime</button>
                                    <button class="btn btn-gray">Gray</button>
                                    <button class="btn btn-yellow">Yellow</button>
                                </p>
                                <p>
                                    <button class="btn btn-link">Link</button>
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="span6">
                        <div class="box box-orange">
                            <div class="box-title">
                                <h3><i class="icon-th-large"></i>Button Sizing</h3>
                            </div>
                            <div class="box-content">
                                <p>
                                    <button class="btn btn-xxlarge">xxLarge</button>
                                    <button class="btn btn-xlarge">xLarge</button>
                                    <button class="btn btn-large">Large</button>
                                    <button class="btn">Default</button>
                                    <button class="btn btn-small">Small</button>
                                    <button class="btn btn-mini">Mini</button>
                                </p>
                                <p>
                                    <button class="btn-block btn btn-large">Block level</button>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row-fluid">
                    <div class="span7">
                        <div class="box box-black">
                            <div class="box-title">
                                <h3><i class="icon-th-large"></i>Disabled Buttons</h3>
                            </div>
                            <div class="box-content">
                                <p>
                                    <button class="btn disabled">Button</button>
                                </p>
                                <p>
                                    <button class="btn disabled btn-primary">Primary</button>
                                    <button class="btn disabled btn-info">Info</button>
                                    <button class="btn disabled btn-warning">Warning</button>
                                    <button class="btn disabled btn-danger">Danger</button>
                                    <button class="btn disabled btn-inverse">Inverse</button>
                                    <button class="btn disabled btn-success">Success</button>
                                </p>
                                <p>
                                    <button class="btn disabled btn-pink">Pink</button>
                                    <button class="btn disabled btn-magenta">Magenta</button>
                                    <button class="btn disabled btn-lime">Lime</button>
                                    <button class="btn disabled btn-gray">Gray</button>
                                    <button class="btn disabled btn-yellow">Yellow</button>
                                </p>
                                <p>
                                    <button class="btn disabled btn-link">Link</button>
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="span5">
                        <div class="box box-red">
                            <div class="box-title">
                                <h3><i class="icon-th-large"></i>Button Dropdown</h3>
                            </div>
                            <div class="box-content">
                                <div>
                                    <div class="btn-group">
                                        <a href="#" data-toggle="dropdown" class="btn dropdown-toggle">Action <span class="caret"></span></a>
                                        <ul class="dropdown-menu">
                                            <li><a href="#">Action 1</a></li>
                                            <li><a href="#">Action 2</a></li>
                                            <li><a href="#">Action 3</a></li>
                                            <li class="divider"></li>
                                            <li><a href="#">Action 4</a></li>
                                        </ul>
                                    </div>
                                </div>
                                <div>
                                    <div class="btn-group">
                                        <a href="#" class="btn">Default Action</a>
                                        <a href="#" data-toggle="dropdown" class="btn dropdown-toggle"><span class="caret"></span></a>
                                        <ul class="dropdown-menu">
                                            <li><a href="#">Action 1</a></li>
                                            <li><a href="#">Action 2</a></li>
                                            <li><a href="#">Action 3</a></li>
                                            <li class="divider"></li>
                                            <li><a href="#">Action 4</a></li>
                                        </ul>
                                    </div>
                                </div>
                                <div>
                                    <div class="btn-group dropup">
                                        <a href="#" class="btn">Dropup</a>
                                        <a href="#" data-toggle="dropdown" class="btn dropdown-toggle"><span class="caret"></span></a>
                                        <ul class="dropdown-menu">
                                            <li><a href="#">Action 1</a></li>
                                            <li><a href="#">Action 2</a></li>
                                            <li><a href="#">Action 3</a></li>
                                            <li class="divider"></li>
                                            <li><a href="#">Action 4</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row-fluid">
                    <div class="span7">
                        <div class="box box-green">
                            <div class="box-title">
                                <h3><i class="icon-th-large"></i>Only Icon</h3>
                            </div>
                            <div class="box-content">
                                <p>
                                    <button class="btn"><i class="icon-bell"></i></button>
                                    <button class="btn btn-primary"><i class="icon-envelope"></i></button>
                                    <button class="btn btn-info"><i class="icon-exclamation-sign"></i></button>
                                    <button class="btn btn-warning"><i class="icon-hdd"></i></button>
                                    <button class="btn btn-danger"><i class="icon-time"></i></button>
                                    <button class="btn btn-inverse"><i class="icon-truck"></i></button>
                                    <button class="btn btn-success"><i class="icon-cloud"></i></button>
                                    <button class="btn btn-pink"><i class="icon-link"></i></button>
                                    <button class="btn btn-magenta"><i class="icon-italic"></i></button>
                                    <button class="btn btn-lime"><i class="icon-bold"></i></button>
                                    <button class="btn btn-yellow"><i class="icon-star"></i></button>
                                    <button class="btn btn-gray"><i class="icon-smile"></i></button>
                                </p>
                                <p>
                                    <button class="btn btn-success btn-xxlarge"><i class="icon-cloud"></i></button>
                                    <button class="btn btn-success btn-xlarge"><i class="icon-cloud"></i></button>
                                    <button class="btn btn-success btn-large"><i class="icon-cloud"></i></button>
                                    <button class="btn btn-success"><i class="icon-cloud"></i></button>
                                    <button class="btn btn-success btn-small"><i class="icon-cloud"></i></button>
                                    <button class="btn btn-success btn-mini"><i class="icon-cloud"></i></button>
                                </p>
                                <p>
                                    <button class="btn btn-success"><i class="icon-cloud"></i></button>
                                    <button class="btn btn-success"><i class="icon-cloud icon-2x"></i></button>
                                    <button class="btn btn-success"><i class="icon-cloud icon-3x"></i></button>
                                    <button class="btn btn-success"><i class="icon-cloud icon-4x"></i></button>
                                    <button class="btn btn-success"><i class="icon-cloud icon-5x"></i></button>
                                </p>
                                <div>
                                    <div class="btn-group">
                                        <a href="#" data-toggle="dropdown" class="btn btn-primary dropdown-toggle"><i class="icon-cog"></i> <span class="caret"></span></a>
                                        <ul class="dropdown-menu dropdown-primary">
                                            <li><a href="#">Action 1</a></li>
                                            <li><a href="#">Action 2</a></li>
                                            <li><a href="#">Action 3</a></li>
                                            <li class="divider"></li>
                                            <li><a href="#">Action 4</a></li>
                                        </ul>
                                    </div>

                                    <div class="btn-group">
                                        <a href="#" class="btn btn-pink"><i class="icon-user"></i></a>
                                        <a href="#" data-toggle="dropdown" class="btn btn-pink dropdown-toggle"><span class="caret"></span></a>
                                        <ul class="dropdown-menu dropdown-pink">
                                            <li><a href="#">Action 1</a></li>
                                            <li><a href="#">Action 2</a></li>
                                            <li><a href="#">Action 3</a></li>
                                            <li class="divider"></li>
                                            <li><a href="#">Action 4</a></li>
                                        </ul>
                                    </div>

                                    <div class="btn-group dropup">
                                        <a href="#" class="btn btn-warning"><i class="icon-signal"></i></a>
                                        <a href="#" data-toggle="dropdown" class="btn btn-warning dropdown-toggle"><span class="caret"></span></a>
                                        <ul class="dropdown-menu dropdown-warning">
                                            <li><a href="#">Action 1</a></li>
                                            <li><a href="#">Action 2</a></li>
                                            <li><a href="#">Action 3</a></li>
                                            <li class="divider"></li>
                                            <li><a href="#">Action 4</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="span5">
                        <div class="box box-pink">
                            <div class="box-title">
                                <h3><i class="icon-th-large"></i>Button Toolbar</h3>
                            </div>
                            <div class="box-content">
                                <h4>Horizontal</h4>
                                <div class="btn-toolbar">
                                    <div class="btn-group">
                                        <button class="btn">1</button>
                                        <button class="btn">2</button>
                                        <button class="btn">3</button>
                                    </div>
                                    <div class="btn-group">
                                        <button class="btn">4</button>
                                        <button class="btn">5</button>
                                    </div>
                                    <div class="btn-group">
                                        <button class="btn">8</button>
                                    </div>
                                </div>
                                
                                <div class="btn-toolbar">
                                    <div class="btn-group">
                                        <button class="btn">Prev</button>
                                        <button class="btn">Next</button>
                                    </div>
                                    <div class="btn-group">
                                        <button class="btn">Left</button>
                                        <button class="btn">Right</button>
                                    </div>
                                </div>

                                <div class="btn-group">
                                    <button class="btn"><i class="icon-fast-backward"></i></button>
                                    <button class="btn"><i class="icon-backward"></i></button>
                                    <button class="btn"><i class="icon-play"></i></button>
                                    <button class="btn"><i class="icon-pause"></i></button>
                                    <button class="btn"><i class="icon-stop"></i></button>
                                    <button class="btn"><i class="icon-forward"></i></button>
                                    <button class="btn"><i class="icon-fast-forward"></i></button>
                                </div>

                                <br>
                                <h4>Vertical</h4>
                                <div class="btn-toolbar">
                                    <div class="btn-group btn-group-vertical">
                                        <button class="btn"><i class="icon-align-left"></i></button>
                                        <button class="btn"><i class="icon-align-center"></i></button>
                                        <button class="btn"><i class="icon-align-right"></i></button>
                                        <button class="btn"><i class="icon-align-justify"></i></button>
                                    </div>
                                </div>

                                <br>
                                <h4>Checkbox</h4>
                                <div data-toggle="buttons-checkbox" class="btn-group">
                                    <button class="btn"><i class="icon-bold"></i></button>
                                    <button class="btn"><i class="icon-italic"></i></button>
                                    <button class="btn"><i class="icon-underline"></i></button>
                                </div>

                                <br>
                                <h4>Radio</h4>
                                <div data-toggle="buttons-radio" class="btn-group">
                                    <button class="btn btn-primary"><i class="icon-align-left"></i></button>
                                    <button class="btn btn-primary"><i class="icon-align-center"></i></button>
                                    <button class="btn btn-primary"><i class="icon-align-right"></i></button>
                                </div>
                                <button class="btn btn-primary" data-toggle="button"><i class="icon-align-justify"></i></button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row-fluid">
                    <div class="span12">
                        <div class="box box-magenta">
                            <div class="box-title">
                                <h3><i class="icon-th-large"></i>Icon & Text</h3>
                            </div>
                            <div class="box-content">
                                <p>
                                    <button class="btn btn-primary"><i class="icon-cog"></i> Left</button>
                                    <button class="btn btn-success">Right <i class="icon-user"></i></button>
                                    <button class="btn btn-info"><i class="icon-mail-forward"></i> 2 Side <i class="icon-reply"></i></button>
                                </p>
                                <p>
                                    <button class="btn btn-warning btn-xxlarge"><i class="icon-edit"></i> xxLarge</button>
                                    <button class="btn btn-warning btn-xlarge"><i class="icon-edit"></i> xLarge</button>
                                    <button class="btn btn-warning btn-large"><i class="icon-edit"></i> Large</button>
                                    <button class="btn btn-warning"><i class="icon-edit"></i> Default</button>
                                    <button class="btn btn-warning btn-small"><i class="icon-edit"></i> Small</button>
                                    <button class="btn btn-warning btn-mini"><i class="icon-edit"></i> Mini</button>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row-fluid">
                    <div class="span6">
                        <div class="box">
                            <div class="box-title">
                                <h3><i class="icon-th-large"></i>Dropdown Styles</h3>
                            </div>
                            <div class="box-content">
                                <div>
                                    <div class="btn-group">
                                        <a href="#" data-toggle="dropdown" class="btn dropdown-toggle"><i class="icon-user"></i> Default <span class="caret"></span></a>
                                        <ul class="dropdown-menu">
                                            <li><a href="#">Action 1</a></li>
                                            <li><a href="#">Action 2</a></li>
                                            <li><a href="#">Action 3</a></li>
                                        </ul>
                                    </div>
                                    <div class="btn-group">
                                        <a href="#" data-toggle="dropdown" class="btn btn-primary dropdown-toggle"><i class="icon-cog"></i> Primary <span class="caret"></span></a>
                                        <ul class="dropdown-menu dropdown-primary">
                                            <li><a href="#">Action 1</a></li>
                                            <li><a href="#">Action 2</a></li>
                                            <li><a href="#">Action 3</a></li>
                                        </ul>
                                    </div>
                                    <div class="btn-group">
                                        <a href="#" data-toggle="dropdown" class="btn btn-warning dropdown-toggle"><i class="icon-cog"></i> Warning <span class="caret"></span></a>
                                        <ul class="dropdown-menu dropdown-warning">
                                            <li><a href="#">Action 1</a></li>
                                            <li><a href="#">Action 2</a></li>
                                            <li><a href="#">Action 3</a></li>
                                        </ul>
                                    </div>
                                    <div class="btn-group">
                                        <a href="#" data-toggle="dropdown" class="btn btn-danger dropdown-toggle"><i class="icon-cog"></i> Danger <span class="caret"></span></a>
                                        <ul class="dropdown-menu dropdown-danger">
                                            <li><a href="#">Action 1</a></li>
                                            <li><a href="#">Action 2</a></li>
                                            <li><a href="#">Action 3</a></li>
                                        </ul>
                                    </div>
                                </div>
                                <div>
                                    <div class="btn-group">
                                        <a href="#" data-toggle="dropdown" class="btn btn-info dropdown-toggle"><i class="icon-cog"></i> Info <span class="caret"></span></a>
                                        <ul class="dropdown-menu dropdown-info">
                                            <li><a href="#">Action 1</a></li>
                                            <li><a href="#">Action 2</a></li>
                                            <li><a href="#">Action 3</a></li>
                                        </ul>
                                    </div>
                                    <div class="btn-group">
                                        <a href="#" data-toggle="dropdown" class="btn btn-success dropdown-toggle"><i class="icon-cog"></i> Success <span class="caret"></span></a>
                                        <ul class="dropdown-menu dropdown-success">
                                            <li><a href="#">Action 1</a></li>
                                            <li><a href="#">Action 2</a></li>
                                            <li><a href="#">Action 3</a></li>
                                        </ul>
                                    </div>
                                    <div class="btn-group">
                                        <a href="#" data-toggle="dropdown" class="btn btn-inverse dropdown-toggle"><i class="icon-cog"></i> Inverse <span class="caret"></span></a>
                                        <ul class="dropdown-menu dropdown-inverse">
                                            <li><a href="#">Action 1</a></li>
                                            <li><a href="#">Action 2</a></li>
                                            <li><a href="#">Action 3</a></li>
                                        </ul>
                                    </div>
                                    <div class="btn-group">
                                        <a href="#" data-toggle="dropdown" class="btn btn-pink dropdown-toggle"><i class="icon-cog"></i> Pink <span class="caret"></span></a>
                                        <ul class="dropdown-menu dropdown-pink">
                                            <li><a href="#">Action 1</a></li>
                                            <li><a href="#">Action 2</a></li>
                                            <li><a href="#">Action 3</a></li>
                                        </ul>
                                    </div>
                                </div>
                                <div>
                                    <div class="btn-group">
                                        <a href="#" data-toggle="dropdown" class="btn btn-magenta dropdown-toggle"><i class="icon-cog"></i> Magenta <span class="caret"></span></a>
                                        <ul class="dropdown-menu dropdown-magenta">
                                            <li><a href="#">Action 1</a></li>
                                            <li><a href="#">Action 2</a></li>
                                            <li><a href="#">Action 3</a></li>
                                        </ul>
                                    </div>
                                    <div class="btn-group">
                                        <a href="#" data-toggle="dropdown" class="btn btn-lime dropdown-toggle"><i class="icon-cog"></i> Lime <span class="caret"></span></a>
                                        <ul class="dropdown-menu dropdown-lime">
                                            <li><a href="#">Action 1</a></li>
                                            <li><a href="#">Action 2</a></li>
                                            <li><a href="#">Action 3</a></li>
                                        </ul>
                                    </div>
                                    <div class="btn-group">
                                        <a href="#" data-toggle="dropdown" class="btn btn-yellow dropdown-toggle"><i class="icon-cog"></i> Yellow <span class="caret"></span></a>
                                        <ul class="dropdown-menu dropdown-yellow">
                                            <li><a href="#">Action 1</a></li>
                                            <li><a href="#">Action 2</a></li>
                                            <li><a href="#">Action 3</a></li>
                                        </ul>
                                    </div>
                                    <div class="btn-group">
                                        <a href="#" data-toggle="dropdown" class="btn btn-gray dropdown-toggle"><i class="icon-cog"></i> Gray <span class="caret"></span></a>
                                        <ul class="dropdown-menu dropdown-gray">
                                            <li><a href="#">Action 1</a></li>
                                            <li><a href="#">Action 2</a></li>
                                            <li><a href="#">Action 3</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="span6">
                        <div class="box box-green">
                            <div class="box-title">
                                <h3><i class="icon-th-large"></i>Dropdown - Icon & Text</h3>
                            </div>
                            <div class="box-content">
                                <div>
                                    <div class="btn-group">
                                        <a href="#" data-toggle="dropdown" class="btn dropdown-toggle"><i class="icon-align-left"></i> Action <span class="caret"></span></a>
                                        <ul class="dropdown-menu">
                                            <li><a href="#"><i class="icon-align-left"></i> Action 1</a></li>
                                            <li><a href="#"><i class="icon-align-center"></i> Action 2</a></li>
                                            <li><a href="#"><i class="icon-align-right"></i> Action 3</a></li>
                                            <li class="divider"></li>
                                            <li><a href="#"><i class="icon-align-justify"></i> Action 4</a></li>
                                        </ul>
                                    </div>
                                </div>
                                <div>
                                    <div class="btn-group">
                                        <a href="#" class="btn"><i class="icon-align-left"></i> Default Action</a>
                                        <a href="#" data-toggle="dropdown" class="btn dropdown-toggle"><span class="caret"></span></a>
                                        <ul class="dropdown-menu">
                                            <li><a href="#"><i class="icon-align-left"></i> Action 1</a></li>
                                            <li><a href="#"><i class="icon-align-center"></i> Action 2</a></li>
                                            <li><a href="#"><i class="icon-align-right"></i> Action 3</a></li>
                                            <li class="divider"></li>
                                            <li><a href="#"><i class="icon-align-justify"></i> Action 4</a></li>
                                        </ul>
                                    </div>
                                </div>
                                <div>
                                    <div class="btn-group dropup">
                                        <a href="#" class="btn"><i class="icon-align-left"></i> Dropup</a>
                                        <a href="#" data-toggle="dropdown" class="btn dropdown-toggle"><span class="caret"></span></a>
                                        <ul class="dropdown-menu">
                                            <li><a href="#"><i class="icon-align-left"></i> Action 1</a></li>
                                            <li><a href="#"><i class="icon-align-center"></i> Action 2</a></li>
                                            <li><a href="#"><i class="icon-align-right"></i> Action 3</a></li>
                                            <li class="divider"></li>
                                            <li><a href="#"><i class="icon-align-justify"></i> Action 4</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row-fluid">
                    <div class="span6">
                        <div class="box box-orange">
                            <div class="box-title">
                                <h3><i class="icon-th-large"></i>Circle Button</h3>
                            </div>
                            <div class="box-content">
                                <p>
                                    <button class="btn btn-circle"><i class="icon-angle-up"></i></button>
                                    <button class="btn btn-circle btn-primary"><i class="icon-angle-right"></i></button>
                                    <button class="btn btn-circle btn-warning"><i class="icon-angle-down"></i></button>
                                    <button class="btn btn-circle btn-danger"><i class="icon-angle-left"></i></button>
                                    <button class="btn btn-circle btn-info"><i class="icon-save"></i></button>
                                    <button class="btn btn-circle btn-success"><i class="icon-star"></i></button>
                                    <button class="btn btn-circle btn-inverse"><i class="icon-home"></i></button>
                                    <button class="btn btn-circle btn-pink"><i class="icon-user"></i></button>
                                    <button class="btn btn-circle btn-magenta"><i class="icon-cog"></i></button>
                                    <button class="btn btn-circle btn-lime"><i class="icon-font"></i></button>
                                    <button class="btn btn-circle btn-yellow"><i class="icon-link"></i></button>
                                    <button class="btn btn-circle btn-gray"><i class="icon-cut"></i></button>
                                </p>

                                <br>
                                <h4>Sizes</h4>
                                <p>
                                    <button class="btn btn-circle btn-xxlarge"><i class="icon-home"></i></button>
                                    <button class="btn btn-circle btn-primary btn-xlarge"><i class="icon-angle-right"></i></button>
                                    <button class="btn btn-circle btn-success btn-large"><i class="icon-bell"></i></button>
                                    <button class="btn btn-circle btn-pink"><i class="icon-remove"></i></button>
                                    <button class="btn btn-circle btn-warning btn-small"><i class="icon-link"></i></button>
                                    <button class="btn btn-circle btn-magenta btn-mini"><i class="icon-star"></i></button>
                                </p>

                                <br>
                                <h4>Toolbar</h4>
                                <div class="btn-toolbar">
                                    <div class="btn-group">
                                        <button class="btn btn-circle"><i class="icon-align-left"></i></button>
                                        <button class="btn btn-circle"><i class="icon-align-center"></i></button>
                                        <button class="btn btn-circle"><i class="icon-align-right"></i></button>
                                        <button class="btn btn-circle"><i class="icon-align-justify"></i></button>
                                    </div>
                                    <div class="btn-group">
                                        <button class="btn btn-circle"><i class="icon-link"></i></button>
                                        <button class="btn btn-circle"><i class="icon-unlink"></i></button>
                                    </div>
                                    <div class="btn-group">
                                        <button class="btn btn-circle"><i class="icon-save"></i></button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="span6">
                        <div class="box box-yellow">
                            <div class="box-title">
                                <h3><i class="icon-th-large"></i>Circle Bordered Button</h3>
                            </div>
                            <div class="box-content">
                                <p>
                                    <button class="btn btn-circle btn-bordered"><i class="icon-align-left"></i></button>
                                    <button class="btn btn-circle btn-bordered btn-primary"><i class="icon-align-center"></i></button>
                                    <button class="btn btn-circle btn-bordered btn-warning"><i class="icon-align-right"></i></button>
                                    <button class="btn btn-circle btn-bordered btn-danger"><i class="icon-align-justify"></i></button>
                                    <button class="btn btn-circle btn-bordered btn-info"><i class="icon-save"></i></button>
                                    <button class="btn btn-circle btn-bordered btn-success"><i class="icon-star"></i></button>
                                    <button class="btn btn-circle btn-bordered btn-inverse"><i class="icon-home"></i></button>
                                    <button class="btn btn-circle btn-bordered btn-pink"><i class="icon-user"></i></button>
                                    <button class="btn btn-circle btn-bordered btn-magenta"><i class="icon-cog"></i></button>
                                    <button class="btn btn-circle btn-bordered btn-lime"><i class="icon-font"></i></button>
                                    <button class="btn btn-circle btn-bordered btn-yellow"><i class="icon-link"></i></button>
                                    <button class="btn btn-circle btn-bordered btn-gray"><i class="icon-cut"></i></button>
                                </p>

                                <br>
                                <h4>Thick</h4>
                                <p>
                                    <button class="btn btn-circle btn-bordered thick"><i class="icon-align-left"></i></button>
                                    <button class="btn btn-circle btn-bordered thick btn-primary"><i class="icon-align-center"></i></button>
                                    <button class="btn btn-circle btn-bordered thick btn-warning"><i class="icon-align-right"></i></button>
                                    <button class="btn btn-circle btn-bordered thick btn-danger"><i class="icon-align-justify"></i></button>
                                    <button class="btn btn-circle btn-bordered thick btn-info"><i class="icon-save"></i></button>
                                    <button class="btn btn-circle btn-bordered thick btn-success"><i class="icon-star"></i></button>
                                    <button class="btn btn-circle btn-bordered thick btn-inverse"><i class="icon-home"></i></button>
                                    <button class="btn btn-circle btn-bordered thick btn-pink"><i class="icon-user"></i></button>
                                    <button class="btn btn-circle btn-bordered thick btn-magenta"><i class="icon-cog"></i></button>
                                    <button class="btn btn-circle btn-bordered thick btn-lime"><i class="icon-font"></i></button>
                                    <button class="btn btn-circle btn-bordered thick btn-yellow"><i class="icon-link"></i></button>
                                    <button class="btn btn-circle btn-bordered thick btn-gray"><i class="icon-cut"></i></button>
                                </p>

                                <br>
                                <h4>To another color on hover</h4>
                                <p>
                                    <button class="btn btn-circle btn-bordered"><i class="icon-align-left"></i></button>
                                    <button class="btn btn-circle btn-bordered btn-to-primary"><i class="icon-align-center"></i></button>
                                    <button class="btn btn-circle btn-bordered btn-to-warning"><i class="icon-align-right"></i></button>
                                    <button class="btn btn-circle btn-bordered btn-to-danger"><i class="icon-align-justify"></i></button>
                                    <button class="btn btn-circle btn-bordered btn-to-info"><i class="icon-save"></i></button>
                                    <button class="btn btn-circle btn-bordered btn-to-success"><i class="icon-star"></i></button>
                                    <button class="btn btn-circle btn-bordered btn-to-inverse"><i class="icon-home"></i></button>
                                    <button class="btn btn-circle btn-bordered btn-to-pink"><i class="icon-user"></i></button>
                                    <button class="btn btn-circle btn-bordered btn-to-magenta"><i class="icon-cog"></i></button>
                                    <button class="btn btn-circle btn-bordered btn-to-lime"><i class="icon-font"></i></button>
                                    <button class="btn btn-circle btn-bordered btn-to-yellow"><i class="icon-link"></i></button>
                                    <button class="btn btn-circle btn-bordered btn-to-gray"><i class="icon-cut"></i></button>
                                </p>
                                <p>
                                    <button class="btn btn-circle btn-bordered"><i class="icon-align-left"></i></button>
                                    <button class="btn btn-circle btn-bordered btn-inverse btn-to-primary"><i class="icon-align-center"></i></button>
                                    <button class="btn btn-circle btn-bordered btn-pink btn-to-warning"><i class="icon-align-right"></i></button>
                                    <button class="btn btn-circle btn-bordered btn-danger btn-to-danger"><i class="icon-align-justify"></i></button>
                                    <button class="btn btn-circle btn-bordered btn-success btn-to-info"><i class="icon-save"></i></button>
                                    <button class="btn btn-circle btn-bordered btn-magenta btn-to-success"><i class="icon-star"></i></button>
                                    <button class="btn btn-circle btn-bordered btn-lime btn-to-inverse"><i class="icon-home"></i></button>
                                    <button class="btn btn-circle btn-bordered btn-primary btn-to-pink"><i class="icon-user"></i></button>
                                    <button class="btn btn-circle btn-bordered btn-yellow btn-to-magenta"><i class="icon-cog"></i></button>
                                    <button class="btn btn-circle btn-bordered btn-gray btn-to-lime"><i class="icon-font"></i></button>
                                    <button class="btn btn-circle btn-bordered btn-info btn-to-yellow"><i class="icon-link"></i></button>
                                    <button class="btn btn-circle btn-bordered btn-warning btn-to-gray"><i class="icon-cut"></i></button>
                                </p>

                                <br>
                                <h4>To another color on hover and fill</h4>
                                <p>
                                    <button class="btn btn-circle btn-fill btn-bordered"><i class="icon-align-left"></i></button>
                                    <button class="btn btn-circle btn-fill btn-bordered btn-to-primary"><i class="icon-align-center"></i></button>
                                    <button class="btn btn-circle btn-fill btn-bordered btn-to-warning"><i class="icon-align-right"></i></button>
                                    <button class="btn btn-circle btn-fill btn-bordered btn-to-danger"><i class="icon-align-justify"></i></button>
                                    <button class="btn btn-circle btn-fill btn-bordered btn-to-info"><i class="icon-save"></i></button>
                                    <button class="btn btn-circle btn-fill btn-bordered btn-to-success"><i class="icon-star"></i></button>
                                    <button class="btn btn-circle btn-fill btn-bordered btn-to-inverse"><i class="icon-home"></i></button>
                                    <button class="btn btn-circle btn-fill btn-bordered btn-to-pink"><i class="icon-user"></i></button>
                                    <button class="btn btn-circle btn-fill btn-bordered btn-to-magenta"><i class="icon-cog"></i></button>
                                    <button class="btn btn-circle btn-fill btn-bordered btn-to-lime"><i class="icon-font"></i></button>
                                    <button class="btn btn-circle btn-fill btn-bordered btn-to-yellow"><i class="icon-link"></i></button>
                                    <button class="btn btn-circle btn-fill btn-bordered btn-to-gray"><i class="icon-cut"></i></button>
                                </p>
                                <p>
                                    <button class="btn btn-circle btn-fill btn-bordered"><i class="icon-align-left"></i></button>
                                    <button class="btn btn-circle btn-fill btn-bordered btn-inverse btn-to-primary"><i class="icon-align-center"></i></button>
                                    <button class="btn btn-circle btn-fill btn-bordered btn-pink btn-to-warning"><i class="icon-align-right"></i></button>
                                    <button class="btn btn-circle btn-fill btn-bordered btn-danger btn-to-danger"><i class="icon-align-justify"></i></button>
                                    <button class="btn btn-circle btn-fill btn-bordered btn-success btn-to-info"><i class="icon-save"></i></button>
                                    <button class="btn btn-circle btn-fill btn-bordered btn-magenta btn-to-success"><i class="icon-star"></i></button>
                                    <button class="btn btn-circle btn-fill btn-bordered btn-lime btn-to-inverse"><i class="icon-home"></i></button>
                                    <button class="btn btn-circle btn-fill btn-bordered btn-primary btn-to-pink"><i class="icon-user"></i></button>
                                    <button class="btn btn-circle btn-fill btn-bordered btn-yellow btn-to-magenta"><i class="icon-cog"></i></button>
                                    <button class="btn btn-circle btn-fill btn-bordered btn-gray btn-to-lime"><i class="icon-font"></i></button>
                                    <button class="btn btn-circle btn-fill btn-bordered btn-info btn-to-yellow"><i class="icon-link"></i></button>
                                    <button class="btn btn-circle btn-fill btn-bordered btn-warning btn-to-gray"><i class="icon-cut"></i></button>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- END Main Content -->
                
                <footer>
                    <p>2013 © FLATY Admin Template.</p>
                </footer>

                <a id="btn-scrollup" class="btn btn-circle btn-large" href="#"><i class="icon-chevron-up"></i></a>
            </div>
            <!-- END Content -->
        </div>
        <!-- END Container -->

        <!--basic scripts-->
        <!--<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>-->
        <script>window.jQuery || document.write('<script src="assets/jquery/jquery-1.10.1.min.js"><\/script>')</script>
        <script src="assets/bootstrap/bootstrap.min.js"></script>
        <script src="assets/nicescroll/jquery.nicescroll.min.js"></script>

        <!--page specific plugin scripts-->

        <!--flaty scripts-->
        <script src="js/flaty.js"></script>

    </body>
</html>
